require('./Search.styl');
const PendingList = require('components/pendinglist');
const SearchBar = require('components/searchbar');
const MonitorList = require('components/monitorlist');
var classNames = require('classnames/bind');

class Search extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [],
            keyword: '',
            currentType: props.currentType || 0,
        };
    }
    onSearch(keyword) {//搜索
        this.setState({
            keyword: keyword
        }, () => {
            this.props.onsearch && this.props.onsearch(keyword);
            this.setState({
                keyword: '',
            })
        })
    }
    onExit() {//退出搜索
        this.props.onExit && this.props.onExit();
    }
    callback(index) {
        this.props.callback && this.props.callback(index);
    }
    handleChangeSearchType(currentType) {
        this.props.handleChangeSearchType(currentType)
    }
    render() {
        let t = this;
        return (
            <div className="search">
                <SearchBar onSearch={t.onSearch.bind(t)} onExit={t.onExit.bind(t)}>
                    <div className={classNames({ 'hide': t.state.data && t.state.data.length > 0 })}>
                        <p className="searchTitle">搜索指定内容</p>
                        <div className="searchRangeBox">
                            {t.props.searchRange.map((item, key) => {
                                return <span key={key} className={classNames({ "searchRange": true, "selected": key == t.state.currentType })} onClick={t.handleChangeSearchType.bind(this, key)}>{item}</span>
                            })}
                        </div>
                    </div>
                    {!this.props.file && <PendingList className={classNames({ 'workplan-manage': t.props.classname, "msg": !t.props.classname })} tool={t.props.tool == 0 ? true : false}
                        origin={t.props.origin} origin_title={t.props.origin_title && t.props.origin_title} data={t.state.data} norefresh="true" />}
                    {this.props.file && <MonitorList
                        ref='monitorList'
                        listdata={this.state.data}
                        callback={this.callback.bind(this)}
                    />}
                </SearchBar>
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            data: nextProps.data,
            filedata: nextProps.filedata,
            currentType: nextProps.currentType,            
        })
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

module.exports = Search;
